<template>
<!--退库管理-->
  <div class="order-box">

    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>主页</el-breadcrumb-item>
        <el-breadcrumb-item>退库管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <div class="th1">
      <el-form label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称">
              <el-input v-model="data.query.client" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货地址">
              <el-input v-model="data.query.address" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单号">
              <el-input v-model="data.query.orderId" style="width:200px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="">
              <el-button type="warning" style="width:200px" @click="queryClick"> <el-icon><Search /></el-icon>&nbsp;&nbsp;搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row class="return-box">
      <el-table :data="data.list"
                border stripe show-header
                style="width: 1200px"
      >
        <el-table-column prop="orderId" label="发货订单编号" show-overflow-tooltip width="200px"/>
        <el-table-column prop="client" label="客户名称" show-overflow-tooltip width="200px"/>
        <el-table-column prop="address" label="收货地址" show-overflow-tooltip width="180px"/>
        <el-table-column prop="client" label="联系人" show-overflow-tooltip width="100px"/>
        <el-table-column prop="consigneePhone" label="联系电话" show-overflow-tooltip width="150px"/>
        <el-table-column prop="status" label="配送状态" width="120px"/>
        <el-table-column fixed="right" label="操作" show-overflow-tooltip width="250px" align="center">
          <template #default="scope">
            <el-button @click="btnShowProduct(scope.row)" type="success">
              <el-icon><ZoomIn /></el-icon>&nbsp;
              商品详情
            </el-button>
            <el-button type="success" @click="returnStock(scope.row)" :disabled="disabledIF(scope.row)">
              <el-icon><Warning /></el-icon>&nbsp;
              退库
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="width: 100%; display: flex;justify-content: right">
        <el-pagination layout="prev, pager, next"
                       style="margin-right: 35px;margin-top: 10px"
                       @current-change="currentChange"
                       v-model:page-size="data.query.page.pageSize"
                       v-model:current-page="data.query.page.current"
                       v-model:total="data.query.page.total"/>
      </el-row>
    </el-row>
  </div>

  <!--商品详情-->
  <el-dialog v-model="data.detailList.show" title="商品详情" width="800">
    <el-table :data="data.detailList.list">
      <el-table-column type="index" label="序号" width="80px"></el-table-column>
      <el-table-column prop="nickName" label="通用名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="productName" label="商品名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="unit" label="包装规格"></el-table-column>
      <el-table-column prop="suppliers" label="生产厂家" show-overflow-tooltip></el-table-column>
      <el-table-column prop="classs" label="产品批号"></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.detailList.show = false">取消</el-button>
        <el-button type="primary" @click="data.detailList.show = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, onMounted} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const data = reactive({
  updateSto: "",
  list: [],
  clients: new Array(Object),
  addshow: false,
  updatashow: false,
  addorder: {
    orderId: '',
    client: '',
    address: '',
    consigneePhone: '',
    createTime: '',
    status: '',
  },
  updatedo: {
    orderId: '',
    statuId: ''
  },
  query: {
    client: "",
    createTime: '',
    address: '',
    orderId: '',
    status: '',
    page: {
      pageSize: 3,
      current: 1,
      total: 2
    }
  },
  orderId: '',
  detailList: {
    show: false,
    list: []
  },

})
//判断是否退库
const disabledIf = () => {
  for (const i in data.list) {
    disabledIfIn(data.list[i]);
  }
}
const disabledIfIn = (list: any) => {
  if (list.status == "已退库") {
    list.disabled = true;
  } else {
    list.disabled = false;
  }
}
const disabledIF = (row: any) => {
  return row.disabled;
}//禁用退库按钮

let currentChange = (current: number) => {
  data.query.page.current = current;
  initOrderList();
}
//获取退货单
let initOrderList = () => {
  console.log(data.query.client);
  axios({
    url: 'http://localhost:8080/clientDeliver/page',
    method: 'get',
    params: {
      createTime: data.query.createTime,
      client: data.query.client,
      address: data.query.address,
      orderId: data.query.orderId,
      status: data.query.status,
      pageSize: data.query.page.pageSize,
      current: data.query.page.current,
      statu: "已退货"
    }
  }).then((res) => {
    data.list = res.data.data;
    data.query.page.total = res.data.total;
    disabledIf();
  })
}

let queryClick = () => {
  initOrderList();
}

onMounted(() => {
  initOrderList();
})

//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}

//确认修改
const updateClick = (row: any) => {
  axios({
    url: 'http://localhost:8080/deliverOrder/updateStatus',
    method: 'post',
    params: {
      orderId: row.orderId,
      statusId: 35
    },
  }).then((res) => {
    if (res.data) {
      successMessage("更新成功");
      initOrderList();
    } else {
      errorMessage("更新失败");
    }
  })
}

//详单显示
const btnShowProduct = (row: any) => {

  data.detailList.show = true;
  axios({
    url: "http://localhost:8080/loadingDetails/selectByOrderId",
    method: "get",
    params: {
      orderId: row.orderId
    }
  }).then((res) => {
    data.detailList.list = res.data.data;
  })
}

//退库
const returnStock = async (row: any) => {
  await axios({
    url: "http://localhost:8080/loadingDetails/selectByOrderId",
    method: "get",
    params: {
      orderId: row.orderId
    }
  }).then((res) => {
    data.detailList.list = res.data.data;
  })//获取详单
  for (const i in data.detailList.list) {
    addSto(data.detailList.list[i]);
  }
  updateClick(row);
}
//入库
const addSto = (list: any) => {
  console.log(list);
  data.updateSto = list.stockCount + list.quantity;
  axios({
    url: "http://localhost:8080/product/updateSto",
    method: "post",
    params: {
      productId: list.productId,
      finishQuantity: data.updateSto
    }
  }).then((res) => {
    if (res.data.success) {
      successMessage(list.productName + "退库成功");
    } else {
      errorMessage(list.productName + "退库失败");
    }
  })
}

</script>

<style scoped>
.th1 {
  margin-top: 20px;
}

.order-box {
  margin: 15px;
  width: 100%;
  height: 100vh;
}

.return-box {
  margin-top: 20px;
  margin-left: 20px;
}
</style>